<template>
  <el-drawer :title="title" :before-close="handleClose" :visible.sync="showDialog" direction="rtl" append-to-body
    custom-class="drawer-industry-new-modify" ref="drawer" :wrapperClosable="false">
    <div class="drawer-body">
      <el-form ref="form" :model="formData" label-position="right" label-width="120px">
        <el-form-item prop="industryId" label="行业ID" :rules="[{ required: true, message: '行业ID不能为空' }]">
          <el-input v-model="formData.industryId" autocomplete="off" placeholder="请输入行业ID" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="industryName" label="行业名称" :rules="[{ required: true, message: '行业名称不能为空' }]">
          <el-input v-model="formData.industryName" autocomplete="off" placeholder="请输入行业名称" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="pre_cmd_para_session_id" label="会话ID" :rules="[{ required: true, message: '会话ID不能为空' }]">
          <el-input v-model="formData.pre_cmd_para_session_id" autocomplete="off" placeholder="请输入会话ID"
            :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="pre_cmd_para_classify_tag" label="标签名称" :rules="[{ required: true, message: '标签名称' }]">
          <el-input v-model="formData.pre_cmd_para_classify_tag" autocomplete="off" placeholder="请输入标签名称" max-length="8"
            min-length="4"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" :loading="loading" @click="handleSubmit">{{
            loading ? "提交中 ..." : "确定"
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>
<script>
import { chatMainApi } from "@/api/chatApi";
export default {
  name: "CompAddClassic",
  data() {
    return {
      showDialog: false,
      title: "",
      formData: {
        industryId: "",
        industryName: "",
        pre_cmd_para_session_id: "",
        pre_cmd_para_classify_tag: "",
      },
      loading: false,
    };
  },
  props: {},
  methods: {
    onEditOrAdd(row) {
      if (!row) {
        return;
      }
      this.formData = {
        industryId: row.industryId,
        industryName: row.industryName,
        pre_cmd_para_session_id: row.pre_cmd_para_session_id,
        pre_cmd_para_classify_tag: "",
      };

      this.title = "收录为经典";

      this.showDialog = true;
    },
    handleClose() {
      this.showDialog = false;
      if (this.loading) {
        this.$message.error("数据提交中,暂不能关闭窗口");
      }
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.formData.pre_cmd_para_classify_tag.length < 4) {
            this.$message.error("标签最少四个字");
            return;
          }

          this.onSubmit();
        }
      });
    },
    async onSubmit() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      let postData = {
        invoke_method: "classify_to_tag",
        pre_cmd_para_classify_tag: this.formData.pre_cmd_para_classify_tag,
        pre_cmd_para_session_id: this.formData.pre_cmd_para_session_id,
      };
      chatMainApi(this.Qs.stringify(postData))
        .then((res) => {
          this.$notify({
            title: "Success",
            message: "收录成功",
            type: "success",
            duration: 2000,
          });
          this.loading = false;
          this.showDialog = false;
          this.$emit('refresh')
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.drawer-industry-new-modify {
  width: 700px;
  padding-right: 10rpx;
  box-sizing: border-box;

  .drawer-body {
    position: relative;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
  }
}
</style>
